import { CopyOutlined, ReadOutlined, EditOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import React, { useState } from 'react';
// 引入路由
import { useNavigate } from 'react-router-dom';

// 列表项需要传递的值
function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}

// 渲染每个列表项
const items = [
    getItem('查看文章列表', 'list', <ReadOutlined />),
    getItem('文章编辑', 'edit', <EditOutlined />),
    getItem('修改资料', 'means', <CopyOutlined />)
];

const Asider = () => {
    // 引入路由
    const navigate = useNavigate();

    // 存储侧边栏主题
    const [theme, setTheme] = useState('dark');

    // 默认选中哪个列表项
    const [current, setCurrent] = useState('list');

    // e 拿到的是列表项的整个对象
    const onClick = (e) => {
        // console.log('click ', e.key);
        navigate(`/${e.key}`)
    };

    return (
        <Menu
            theme={theme}
            onClick={onClick}
            // 侧边栏宽度
            style={{
                width: 180,
            }}
            className='aside'
            // 默认选中的key,就是选中的列表项
            selectedKeys={[current]}
            mode="inline"
            items={items}
        />
    );
};

export default Asider;